// eslint-disable-next-line import/no-unresolved
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React, {Component} from 'react';
import {Card, Row, Col} from 'antd';
import {connect} from 'dva';
import {eventTrigger} from '@/utils/resize';
import Prediction from "./components/Prediction";
import LuzhaPrediction from "./components/LuzhaPrediction";
import ContentStatistics from "./components/ContentStatistics";
import ContentCurve from "./components/ContentCurve";
import LuzhaContentCurve from "./components/LuzhaContentCurve";
import RawFuelTracking from "./components/RawFuelTracking";
import CoreDataTrend from "./components/CoreDataTrend";
import time, {currentTime, dateFormat} from "@/utils/time";
import {trigger} from '@/utils/utils';
import Common from "@/pages/common";
import CommonTable from "@/pages/commonTable";


class HanFan extends Component {


  contentStatisticsReqRef = 0;

  contentChangeReqRef = 0;

  predictionReqRef = 0;

  rawFuelTrackingReqRef = 0;

  stopLoop = false; // 页面取消挂载后,停止循环请求api

  showFlag = {
    showPrediction: false,
    showContentStatistics: false,
    showContentChange: false,
    showFuelTrackingLoading: false,
  };


  // 这里主要构造定时任务请求
  componentDidMount() {
    const {dispatch} = this.props;
    this.contentChangeReqRef = requestAnimationFrame(() =>
      trigger(
        () => {
          let current = currentTime();
          dispatch({
            type: 'hanfan/contentChange',
            payload:{
              start: dateFormat(new Date(current.valueOf()-24* 60 * 60 *1000)),
              end: dateFormat(current)
            }
          })
        },
        new Date().valueOf(),
        60 * 1000,
        true,
        () => this.stopLoop));

    // this.contentStatisticsReqRef = requestAnimationFrame(() =>
    //   trigger(
    //     () => {
    //       let current = currentTime();
    //       dispatch({
    //         type: 'hanfan/contentStatistics',
    //         payload:{
    //           start: dateFormat(new Date(current.valueOf()- 60 * 60 *1000)),
    //           end: dateFormat(current)
    //         }
    //       })
    //     },
    //     new Date().valueOf(),
    //     60 * 1000,
    //     true,
    //     () => this.stopLoop));


    this.rawFuelTrackingReqRef = requestAnimationFrame(() =>
      trigger(
        () => {
          let current = currentTime();
          dispatch({
            type: 'hanfan/fuelTracking',
            payload:{
              end: dateFormat(current)
            }
          })
        },
        new Date().valueOf(),
        60 * 1000,
        true,
        () => this.stopLoop));


  }

  componentDidUpdate(preProps) {
    const {showPrediction, showContentStatistics, showContentChange, showFuelTrackingLoading} = this.showFlag;
    const {predictionLoading, contentStatisticsLoading, contentChangeLoading, fuelTrackingLoading, global} = this.props;


    if (!showPrediction) {
      if (predictionLoading) {
        this.showFlag.showPrediction = true;
      }
    }
    if (!showContentStatistics) {
      // if (contentStatisticsLoading) {
        this.showFlag.showContentStatistics = true;
      // }
    }

    if (!showContentChange) {
      if (contentChangeLoading) {
        this.showFlag.showContentChange = true;
      }
    }
    if (!showFuelTrackingLoading) {
      if (fuelTrackingLoading) {
        this.showFlag.showFuelTrackingLoading = true;
      }
    }

    if (preProps.global.collapsed !== global.collapsed) {
      eventTrigger()
    }
  }


  componentWillUnmount() {
    cancelAnimationFrame(this.contentStatisticsReqRef);
    cancelAnimationFrame(this.contentChangeReqRef);
    cancelAnimationFrame(this.rawFuelTrackingReqRef);
    this.stopLoop = true
  }


  render() {
    const topColResponsiveProps = {
      style: {
        marginTop: 24,
      },
    };

    const {
      contentStatistics,
      globalTime
    } = this.props;

    const {showPrediction, showContentStatistics, showContentChange, showFuelTrackingLoading} = this.showFlag;

    return (
      <PageHeaderWrapper title="含钒模块">
        <Row>
          <Col span={8} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              title="含钒预测"
              bordered={false}
              loading={false}
            >
              <Prediction
                chartId='predictionInfo'
                width={100}
                height={375}
                ref={grid => {
                  this.predictionData = grid
                }}
              />
            </Card>
          </Col>
          <Col span={8} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              title="钒含量变化曲线"
              bordered={false}
            >
              <Common name="HanfanVComponent"/>
            </Card>
          </Col>
          <Col span={8}>
            <Card
              style={{width:'100%'}}
              title="钒含量统计"
              bordered={false}
              loading={!showContentStatistics}
            >
              <ContentStatistics
                width={100}
                height={325}
                data={contentStatistics}
                globalTime={globalTime}
                ref={grid => {
                  this.contentStatistics = grid
                }}
              />
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={12} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              title="炉渣预测"
              bordered={false}
              loading={false}
            >
              <LuzhaPrediction
                chartId='luzhaPredictionInfo'
                width={100}
                height={330}
                ref={grid => {
                  this.luzhaPredictionData = grid
                }}
              />
            </Card>
          </Col>
          <Col span={12} style={{paddingRight: 8}}>
            <Common name="LuzhaComponent"/>
          </Col>

        </Row>

        <Row style={{marginTop: 24}}>
          <Card
            style={{width:'100%'}}
            bordered={false}
            title="原燃料跟踪"
            loading={!showFuelTrackingLoading}

          >
            <RawFuelTracking/>
          </Card>
        </Row>
        <Row style={{marginTop: 24}}>
            <Card
              style={{width:'100%'}}
              bordered={false}
              title="核心参数趋势">
              <CoreDataTrend
              />
            </Card>
        </Row>
        <Row>
          <CommonTable title="含钒数据" name="HanfanData" timeRange={30} scroll={{
            y: 310,
          }}/>
        </Row>
      </PageHeaderWrapper>
    )
  }
}

// model/hanfan 中的state挂载
export default connect(({hanfan, loading, global}) => ({
  contentStatistics: hanfan.contentStatistics,
  predictionLoading: loading.effects["hanfan/predictionData"],
  contentStatisticsLoading: loading.effects["hanfan/contentStatistics"],
  contentChangeLoading: loading.effects["hanfan/contentChange"],
  fuelTrackingLoading: loading.effects["hanfan/fuelTracking"],
  globalTime: hanfan.globalTime,
  global
}))
(HanFan);
